<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px">
          <el-input
              placeholder="请输入设备名称"
              v-model="name"
              clearable>
          </el-input>
          <el-input
              placeholder="请输入设备标识"
              v-model="deviceKey"
              clearable>
          </el-input>
          <template>
            <el-select v-model="deviceTypeId" placeholder="请选择设备类型">
              <el-option
                  v-for="deviceType in devicesTypeBean.list"
                  :key="deviceType.deviceTypeId"
                  :label="deviceType.name"
                  :value="deviceType.deviceTypeId">
              </el-option>
            </el-select>
          </template>
          <el-button type="primary" @click.prevent="fnLoadData(1)">查询</el-button>
          <el-button type="danger"  @click.prevent="fnRestFrom">
            <i class="el-icon-refresh-left" ></i>清空
          </el-button>
    </el-row>
    <el-table
        :data="bean.list"
        border
        with="700px"
        style="text-align: center">
      <el-table-column
          fixed
          prop="name"
          label="设备名称"
          :span="2">
      </el-table-column>
      <el-table-column
          prop="deviceKey"
          label="设备标识"
          >
      </el-table-column>
      <el-table-column
          prop="deviceTypeName"
          label="设备类型"
         >
      </el-table-column>
      <el-table-column
          prop="productId"
          label="所属产品"
         >
      </el-table-column>
      <el-table-column
          prop="parentId"
          label="父设备"
          >
      </el-table-column>
      <el-table-column
          prop="tenantId"
          label="所属用户"
         >
      </el-table-column>
      <el-table-column
          prop="active"
          label="激活状态"
          >
        <template slot-scope="{row}">
          <span v-if="row.active === 1"><el-tag type="danger">未激活</el-tag></span>
          <span v-else-if="row.active === 2"><el-tag type="success">激活</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="deviceIndex"
          label="在线状态"
          >
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建日期"
          >
      </el-table-column>
      <el-table-column
          label="操作"
          >
        <template slot-scope="scope">
<!--          <el-button  @click="fnPreUpdate(scope.row)" type="text" size="small">编辑</el-button>-->
          <el-button  @click="fnDeviceControl(scope.row)" type="text" size="small">发送命令</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="fnLoadData"
        :current-page.sync="page"
        :page-size="bean.pageSize"
        :total="bean.total">
    </el-pagination>
    <device-control ref="deviceControlDialog" @closed="fnRestFrom"/>
  </div>
</template>
<script>
import DeviceControl from "@/components/DeviceControl.vue";

export default {
  name: "DeviceManagementView",
  components:{
    DeviceControl
  },
  methods: {

    fnDeviceControl(){
      this.$refs.deviceControlDialog.visible=true;
    },
    fnLoadData(){
      this.axios.get("http://localhost:8080/devices/devicesList", {params: {
          name:this.name,
          deviceKey:this.deviceKey,
          deviceTypeId:this.deviceTypeId,
          page:this.page
      }})
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    },
    fnRestFrom(p){
      this.axios.get("http://localhost:8080/devices/devicesList", {params: {p}})
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    }
  },

  data() {
    return {
      bean:{
        list:[]
      },
      devicesTypeBean:{
        list:[]
      },
      page:1,
      deviceTypeId:'',
      deviceKey:'',
      name:'',
      userInfo:{}
    }
  },
  mounted() {
    this.fnLoadData();
    this.axios.get("http://localhost:8080/devices/devicesTypeList")
        .then(res=>{
          console.log(res)
          if (res.data.code === "200"){
            this.$message.success("查询成功");
            this.devicesTypeBean = res.data.data;
          }
        });
    var u = sessionStorage.getItem("userInfo");
    if (u){
      this.userInfo = JSON.parse(u);
    }
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
  width:150px;
}

.el-button {
  margin-right: 10px;
}
</style>

